<template>
    <div class="clearfix">
        <a-upload
            name="file"
            :action="$staticUrl"
            :before-upload="beforeUpload"
            :accept="accept"
            :defaultFileList="defaultArr"
            :data="uploadData"
            @change="handleChange"
            :remove="handleRemove"
        >
            <slot v-if="$slots.default"></slot>
            <a-button v-else class="btn"><a-icon type="upload" />{{ btnText }}</a-button>
        </a-upload>
        <p class="tips">只能上传安卓安装包文件，只允许上传1个文件</p>
    </div>
</template>

<script>
import { getUUID } from '@/plugins/tools'

export default {
    name: 'FileUpload',
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: Array,
            default: (val) => {
                return []
            }
        },
        btnText: {
            type: String,
            default: '上传文件'
        },
        accept: {
            type: String,
            default: '.apk'
        },
        path: {
            required: true,
            type: String
        },
        fileSize: {
            type: Number,
            default: 200
        },
        // 最多上传数量
        max: {
            type: Number,
            default: () => {
                return 1
            }
        }
    },
    data () {
        return {
            defaultArr: [],
            sourceList: [],
            uploadData: {
                signature: '',
                'x-cos-security-token': '',
                'Content-Type': '',
                key: '',
                dir: '',
                host: ''
            },
            count: -1
        }
    },
    methods: {
        beforeUpload (file) {
            return new Promise((resolve, reject) => {
                const isLt4M = file.size / 1024 / 1024 < this.fileSize

                if (this.sourceList.length >= this.max) {
                    this.$message.error(`最多上传${this.max}个文件`)
                    return false
                }

                if (!isLt4M) {
                    this.$message.error(`图片大小不能超过${this.fileSize}M!`)
                    return false
                }
                const _path = '/' + this.path + '/' + this.$service.dateFormatter('yyyy-MM-dd') + '/'
                this.$service.getAuthor({ Method: 'POST', Pathname: '/' })
                    .then((info) => {
                        this.uploadData.signature = info.Authorization
                        this.uploadData['x-cos-security-token'] = info.XCosSecurityToken
                        this.uploadData['Content-Type'] = ''
                        this.uploadData.key = _path + getUUID() + '.' + file.name.replace(/,/g, '').split('.').pop()
                        this.uploadData.dir = _path
                        this.uploadData.host = this.$staticUrl
                        resolve(true)
                    })
            })
        },
        handleChange ({ file, fileList }) {
            if (file.status === 'uploading') {
                return
            }
            if (file.status === 'done') {
                this.sourceList.push({
                    uid: file.uid,
                    url: this.uploadData.key,
                    name: file.name.replace(/[,，]/g, '')
                })
                const temp = this.sourceList.map(item => item.url)
                this.$emit('change', temp)
            }
        },
        handleRemove (file) {
            this.sourceList = this.sourceList.filter(item => item.uid !== file.uid)
            const temp = this.sourceList.map(item => item.url)
            this.$emit('change', temp)
        }
    }
}
</script>
<style scoped lang="less">
.tips{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: @primary-color;
}
.ant-upload.ant-upload-disabled .btn{
  cursor: not-allowed;
}

</style>
